<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="90%"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    class="conflict-detail-dialog"
    top="5vh"
  >
              <div class="conflict-detail-content">
       <!-- 基本信息区域 -->
       <div class="info-section">
         <div class="info-grid">
         <!--   <div class="info-item">
             <span class="info-label">关键词：</span>
             <span class="info-value">{{ conflictInfo.keywords }}</span>
           </div> -->
           <div class="info-item">
             <span class="info-label">检索范围：</span>
             <span class="info-value">{{ conflictInfo.scope }}</span>
           </div>
           <div class="info-item">
             <span class="info-label">冲突数量：</span>
             <span class="info-value conflict-count">{{ conflictInfo.conflictCount }}</span>
           </div>
         </div>
       </div>

       <!-- 冲突摘要 -->
       <div class="conflict-summary" v-if="conflictInfo.summary">
         <div class="summary-content">
           {{ conflictInfo.summary }}
         </div>
       </div>

       <!-- 冲突详情区域（HTML内容） -->
       <div v-html="content"></div>
     </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" class="cancel-btn">关闭</el-button>
        <el-button type="primary" @click="handleExport" :loading="exporting" class="export-btn">
          导出报告
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'

// 冲突信息接口
interface ConflictInfo {
  keywords: string
  scope: string
  conflictCount: number
  summary?: string
}

// Props
interface Props {
  visible: boolean
  title?: string
  conflictInfo: ConflictInfo
  content: string
}

// Emits
interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'close'): void
  (e: 'export'): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '冲突检测详情',
  conflictInfo: () => ({
    keywords: '',
    scope: '',
    conflictCount: 0
  }),
  content: ''
})

const emit = defineEmits<Emits>()

// 响应式数据
const exporting = ref(false)

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})



// 关闭弹窗
const handleClose = () => {
  emit('close')
}

// 导出报告
const handleExport = async () => {
  try {
    exporting.value = true
    // 模拟导出过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    ElMessage.success('报告导出成功')
    emit('export')
  } catch (error) {
    ElMessage.error('报告导出失败')
  } finally {
    exporting.value = false
  }
}
</script>

<style scoped>
.conflict-detail-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.conflict-detail-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  margin: 0;
}

.conflict-detail-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.conflict-detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 18px;
}

.conflict-detail-dialog :deep(.el-dialog__body) {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.conflict-detail-dialog :deep(.el-dialog__footer) {
  padding: 16px 24px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.conflict-detail-content {
  padding: 24px;
  background: #f8fafc;
  min-height: 60vh;
}

/* 基本信息区域 */
.info-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
  min-width: 80px;
}

.info-value {
  color: #6b7280;
  font-size: 14px;
}

.conflict-count {
  color: #dc2626 !important;
  font-weight: 600;
  font-size: 16px;
}

/* 冲突摘要 */
.conflict-summary {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.summary-content {
  color: #92400e;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

/* 冲突详情区域 */
.conflicts-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}





/* HTML内容中的标签样式 */
.conflict-detail-content :deep(.tag) {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
}

.conflict-detail-content :deep(.tag-danger) {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.conflict-detail-content :deep(.tag-high) {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.conflict-detail-content :deep(.tag-primary) {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.conflict-detail-content :deep(.tag-success) {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.conflict-detail-content :deep(.tag-warning) {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fed7aa;
}

.conflict-detail-content :deep(.conflict-header) {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.conflict-detail-content :deep(.conflict-header h3) {
  margin: 0 0 12px 0;
  color: #111827;
  font-size: 18px;
  font-weight: 600;
}

.conflict-detail-content :deep(.conflict-meta) {
  margin-bottom: 12px;
}

.conflict-detail-content :deep(.conflict-description) {
  color: #6b7280;
  margin: 0;
}

.conflict-detail-content :deep(.conflict-documents h4) {
  margin: 0 0 16px 0;
  color: #374151;
  font-size: 16px;
  font-weight: 600;
}

.conflict-detail-content :deep(.document-section) {
  margin-bottom: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.conflict-detail-content :deep(.document-header) {
  background: #f9fafb;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.conflict-detail-content :deep(.document-header h5) {
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

.conflict-detail-content :deep(.document-content) {
  padding: 16px;
  background: white;
}





/* HTML内容样式美化 */
.conflict-detail-content :deep(h1),
.conflict-detail-content :deep(h2),
.conflict-detail-content :deep(h3),
.conflict-detail-content :deep(h4),
.conflict-detail-content :deep(h5),
.conflict-detail-content :deep(h6) {
  color: #111827;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.conflict-detail-content :deep(h1) { font-size: 18px; }
.conflict-detail-content :deep(h2) { font-size: 16px; }
.conflict-detail-content :deep(h3) { font-size: 15px; }
.conflict-detail-content :deep(h4) { font-size: 14px; }

.conflict-detail-content :deep(p) {
  margin: 0 0 12px 0;
  text-align: justify;
}

.conflict-detail-content :deep(ul),
.conflict-detail-content :deep(ol) {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

.conflict-detail-content :deep(li) {
  margin-bottom: 8px;
  line-height: 1.6;
}

.conflict-detail-content :deep(strong),
.conflict-detail-content :deep(b) {
  color: #111827;
  font-weight: 600;
}

.conflict-detail-content :deep(em),
.conflict-detail-content :deep(i) {
  color: #6b7280;
  font-style: italic;
}

.conflict-detail-content :deep(blockquote) {
  margin: 12px 0;
  padding: 12px 16px;
  background: #f3f4f6;
  border-left: 4px solid #667eea;
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #4b5563;
}

.conflict-detail-content :deep(code) {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #dc2626;
}

.conflict-detail-content :deep(pre) {
  background: #1f2937;
  color: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
}

.conflict-detail-content :deep(pre code) {
  background: none;
  color: inherit;
  padding: 0;
}

.conflict-detail-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.conflict-detail-content :deep(th),
.conflict-detail-content :deep(td) {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: left;
}

.conflict-detail-content :deep(th) {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
}

/* 弹窗底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  color: #6b7280;
  border-color: #d1d5db;
  background: white;
}

.export-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
}

.export-btn:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .conflict-detail-dialog :deep(.el-dialog) {
    width: 95%;
    margin: 2vh auto;
  }
  
  .conflict-detail-content {
    padding: 16px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .documents-grid {
    grid-template-columns: 1fr;
  }
  
  .document-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .document-meta {
    margin-left: 0;
  }
}
</style>
